<html>

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			
			#nav {
				width: 500px;
				height: 40px;
				background: #ccc;
				margin: 0 auto;
			}
			
			ul {
				background: #aaa
			}
			
			ul li {
				float: left;
				display: block;
				height: 40px;
				line-height: 40px;
				padding: 0 20px;
				position: relative;
			}
			
			ul li:hover {
				background: #cea;
			}
			
			ul li ul li {
				float: none;
			}
			/*关键一：将二级菜单设置为display：none;*/
			
			ul li ul {
				position: absolute;
				top: 40px;
				left: 0;
				display: none;
			}
			
			ul li ul li:hover {
				background: red;
			}
			/*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
			
			ul li:hover ul {
				display: block;
			}
		</style>
		
		<link rel="stylesheet" href="../build/css/minu.css" />
	</head>

	<body>

		<ul class="minu-nav minu-layout-right">
			<li class="minu-nav-item">
				<a href="javascript:;">贤心
					<span class="layui-icon layui-icon-triangle-d minu-nav-more"></span>
				</a>
				<dl class="minu-nav-child">
					<dd>
						<a href="">基本资料</a>
					</dd>
					<dd>
						<a href="">安全设置</a>
					</dd>
				</dl>
			</li>
			<li class="minu-nav-item">
				<a href="">登录</a>
			</li>
			<li class="minu-nav-item">
				<a href="">注册</a>
			</li>
			<li class="minu-nav-item">
				<a href="">退了</a>
			</li>
		</ul>

		<div id="nav">
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">汽车</a>
					<ul>
						<li>
							<a href="#">奥迪</a>
						</li>
						<li>
							<a href="#">道奇</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">手机</a>
					<ul>
						<li>
							<a href="#">小米</a>
						</li>
						<li>
							<a href="#">华为</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">联系我们</a>
				</li>
			</ul>
		</div>

		<body>

</html>